<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>学生的年龄：{{getAge}}</p>
			<p>商品的价格：{{getProductTotalPrice}}:{{getTotal()}}</p>
			<h3>我的爱好</h3>
			<ul>
				<li v-for="favaor in favors" :key="favaor">{{favaor}}</li>
			</ul>
			<ul>
				<li v-for="(favaor,index) in favors" :key="index">{{favaor}}:{{index}}</li>
			</ul>
			<h3>学生的信息</h3>
			<ul>
				<li v-for="s in student">{{s}}</li>
				<li v-for="(s,k) in student">{{s}}:{{k}}</li>
				<li v-for="(s,k,i) in student">{{s}}:{{k}}:{{i}}</li>
			</ul>
			
			
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app=new Vue({
				el:'#app',
				data:{
					msg:"我的爱好",
					favors:['football','basketball','valloyball'],//怎么展示数组数据
					student:{ //怎么展示对象数据
						name:'admin',
						age:20,
						birthday:'10-23'
					},
					product:{
						count:5,
						price:12,
						discount:0.8,
						freight:5
					}
				},
				computed:{
					//获取学生年龄
					getAge(){
						return this.$data.student.age
					},
					getProductTotalPrice(){
						return this.$data.product.count*
						this.$data.product.price*
						this.$data.product.discount+
						this.$data.product.freight;
					}
				},methods:{
					//方法都是放在这
					getTotal(){
						return this.$data.product.count*
						this.$data.product.price*
						this.$data.product.discount+
						this.$data.product.freight;
					}
				},
				mounted:function(){
					this.$data.favors.push("swimming");
				}
			})
		</script>
	</body>
</html>
